<template>
  <div class="add-hotel">
    <Breadcrumb :pathContent="content" />
    <el-form>
      <el-form-item>
         <!-- 别名操作框 -->
        <AliasesPopver :datas="aliasesData"  v-if="isOpen" @close="isOpen = false"/>
        <div class="add-hotel-content">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first" :disabled="!isClick('first')">
              <HotelBasic :roomInfo="hotel"  v-model="activeName" @open="show"/>
            </el-tab-pane>
            <el-tab-pane label="酒店设施" name="second" :disabled="!isClick('second')">
              <HotelFacilities :datas="hotelFacilities"  v-model="activeName"/>
            </el-tab-pane>
            <el-tab-pane label="酒店政策" name="third" :disabled="!isClick('third')" > 
              <HotelPolicy  :datas="hotelRules" v-model="activeName"/>
            </el-tab-pane>
            <el-tab-pane label="周边设施" name="fourth" :disabled="!isClick('fourth')" >
              <SurroundingFacilities :datas="hotelAroundFacilities" v-model="activeName"/>
            </el-tab-pane>
            <el-tab-pane label="酒店图片" name="fifth" :disabled="!isClick('fifth')" >
              <HotelPicture v-if="activeName === 'fifth'"/>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import AliasesPopver from '@/components/common/AliasesPopover'
const Breadcrumb = () => import('@/components/common/Breadcrumb')
const HotelBasic = () => import('@/components/hotel/add_hotel/HotelBasic')
const HotelFacilities = () => import('@/components/hotel/add_hotel/HotelFacilities')
const HotelPolicy = () => import('@/components/hotel/add_hotel/HotelPolicy')
const SurroundingFacilities = () => import('@/components/hotel/add_hotel/SurroundingFacilities')
const HotelPicture = () => import('@/components/hotel/add_hotel/HotelPicture')

export default {
  data () {
    return {
      aliasesData: '',
      isOpen: false,
      activeName: 'first',
      content: {
        firstTitle: '酒店管理',
        secondTitle: '酒店信息'

      },
      // 酒店信息
      hotel: {
        num: '',
        name: '',
        enName: '',
        star: '',
        country: '',
        province: '',
        city: '',
        area: '',
        address: '',
        web: '',
        tel: '',
        tag: '',
        openTime: null,
        lastRenovationTime: null,
        fax: '',
        zipCode: '',
        roomNum: '',
        lon: '',
        lat: '',
        type: '',
        description: '',
        state: '',
        updateUser: '',
        updateTime: '',
        hotelAlias: [],
        addressList: []
      },
      // 酒店周边设施
      hotelAroundFacilities: [{
        name: '',
        description: ''
      }],
      // 酒店基础设施
      hotelFacilities: [{
        commonFacilities: '',
        serviceProject: '',
        roomFacilities: '',
        updateUser: '',
        updateTime: ''
      }],
      // 酒店图片
      hotelPictrues: [],
      // 酒店政策
      hotelRules: [{
        checkInTime: '',
        checkOutTime: '',
        childrenRule: '',
        petRule: '',
        acceptBankCard: '',
        updateUser: '',
        updateTime: ''
      }]
    }
  },
  created () {
    this.activeName = sessionStorage.getItem('TabName')
    sessionStorage.setItem('isCreate', true)
  },
  watch: {
     // 本地存储 tab状态
    activeName (val) {
      console.log(val)
      sessionStorage.setItem('TabName', val)
    }
  },
  methods: {
    isClick (tabIndex) {
      if (this.activeName === tabIndex) {
        return true
      } else {
        return false
      }
    },
    show (val) {
      let _this = this
      setTimeout(() => {
        this.isOpen = true
      }, 10)
      _this.aliasesData = val
    },
    handleClick () { }
    // 获取酒店信息
  },
  components: {
    Breadcrumb,
    HotelBasic,
    HotelFacilities,
    HotelPolicy,
    SurroundingFacilities,
    HotelPicture,
    AliasesPopver
  }
}
</script>
<style lang="scss">
.el-form .information-btn {
  margin-left: -20px;
  padding: 8px 0px 8px 30px;
}
.el-tabs__header {
  margin: 0px;
}
.add-hotel-content {
  background-color: white;
  padding:0 20px;
  position: relative;
  min-height: 80vh;
  /*头部切换导航样式*/
  .el-tabs__item {
    height: 74px;
    line-height: 74px;
  }
  .el-tabs__item.is-active {
    color: #45a2ff;
  }
  .el-tabs__item:hover {
    color: #45a2ff;
  }
  .demo-ruleForm {
    .el-form-item,
    .el-form-item__content,
    .el-form-item__label,
    .el-cascader {
      line-height: 34px;
      height: 34px;
    }
  }
}
.expand-trigger div {
  height: 50px !important;
}
.increase {
  position: absolute;
  top: 0;
  left: 0;
  width: 96.5%;
  background: white;
  z-index: 3;
  padding: 20px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  h1 {
    text-align: left;
    margin-bottom: 10px;
  }
  .el-form-item {
    .el-form-item__content {
      text-align: left;
      .el-input {
        width: 300px;
      }
    }
  }
  
}
.el-tabs__item.is-disabled{
    color:#999;
}
</style>
